<template>
  <div class="comment">
    <header id="info" @click="showDetail(comment.proid)">
      <img :src="comment.avatar"/>
      <div class="block">
        <span class="user">{{ comment.username }}</span>
        <van-rate v-model="comment.star" readonly color="#ffd21e" size="16"/>
      </div>
      <span class="time">{{ comment.time.toString().split('T').join(' ').split('.').slice(0, 1).join('') }}</span>
    </header>
    <section id="contents">
      {{ comment.content }}
    </section>
    <section id="imgs">
      <div class="img" v-for="(item,index) in comment.imgs||[]" :key="index" @click="tabImg(index)">
        <img ref="img" :src="item" :class="{single:comment.imgs.length===1}"/>
      </div>
    </section>
    <section v-if="comment.msg&&comment.msg.length" style="font-size: 14px;margin-top: 5px">
      <span style="color: #222222;">商家回复：</span>
      <span class="van-ellipsis" style="color: #aaa">{{ comment.msg }}</span>
    </section>
    <van-image-preview v-model="show" closeable :loop="false" :images="comment.imgs||[]" :start-position="current">
    </van-image-preview>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import Vue from 'vue'

Vue.use(ImagePreview)
export default {
  name: 'Comments',
  props: {
    comment: {
      type: Object,
      default () {
        return {
          username: '',
          avatar: '',
          time: '',
          star: 5,
          content: '',
          imgs: [],
          msg: ''
        }
      }
    }
  },
  data () {
    return {
      show: false,
      current: 0
    }
  },
  mounted () {
    const imgList = Array.from(this.$refs.img || [])
    imgList.forEach(item => {
      item.height = item.width
    })
  },
  methods: {
    tabImg (index) {
      this.current = index
      this.show = true
    },
    showDetail (proid) {
      this.$router.push('/shopDetail/' + proid)
    }
  }
}
</script>

<style lang="scss" scoped>
.comment {
  padding: 10px 12px;
  text-align: left;
  background: #fff;

  #info {
    display: flex;
    height: 40px;
    align-items: center;

    > img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      align-self: flex-start;
      margin-top: 2px;
      margin-right: 5px;
    }

    .block {
      display: flex;
      flex: 1;
      flex-direction: column;

      .user {
        font-weight: bold;
      }
    }

    .time {
      color: #bbbbbb;
      font-size: 12px;
      align-self: flex-start;
      margin-top: 5px;
    }
  }

  #contents {
    padding: 15px 5px;
  }

  #imgs {
    display: flex;

    .img {
      flex: 1;
      padding: 4px;

      img {
        width: 100%;
      }
    }
  }

  .single {
    width: 100% !important;
    height: auto;
  }
}
</style>
